<template>
  <div class="list flex box-row-column">
    <div class="flex">
      <div class="header_left flex-1 flex box-row-column ">
        <div class="zi1">风控节点 | 劳资阶段</div>

        <div class="flex mt20 flex-1">
          <div class="flex box-row-column flex-pack-around " style="width: 20%;">

            <!-- <div :class="chekid === index ? 'tab_one on' : 'tab_one'" v-for="(item, index) in cateoptions" :key="item.id" @click="divClick(item, index)">
            <img class="logoimg1" src="@/assets/image/cf/img09.png" alt="" v-if="(index === 0) & (chekid !== index)" />
            <img class="logoimg2" src="@/assets/image/cf/img10.png" alt="" v-if="(index === 1) & (chekid !== index)" />
            <img class="logoimg3" src="@/assets/image/cf/img11.png" alt="" v-if="(index === 2) & (chekid !== index)" />
            <img class="logoimg1" src="@/assets/image/cf/img09_1.png" alt="" v-if="(index === 0) & (chekid === index)" />
            <img class="logoimg2" src="@/assets/image/cf/img10_1.png" alt="" v-if="(index === 1) & (chekid === index)" />
            <img class="logoimg3" src="@/assets/image/cf/img11_1.png" alt="" v-if="(index === 2) & (chekid === index)" />

            {{ item.title }}

            <div class="jiantouimg" v-if="chekid === index"></div>
          </div> 

          <div :class="getclass(index)" v-for="(item, index) in cateoptions" :key="item.id" @click="divClick(item, index)">
            <div class="flex-1">
              {{ item.title }}
            </div>
            <div style="padding: 0px 10px">
              <img class="logoimg1" src="@/assets/image/cf/img14.png" alt="" v-if="index === 0" />
              <img class="logoimg2" src="@/assets/image/cf/img15.png" alt="" v-if="index === 1" />
              <img class="logoimg3" src="@/assets/image/cf/img16.png" alt="" v-if="index === 2" />
            </div>
          </div>-->



          <div v-for="(item, index) in cateoptions" :key="item.id" @click="divClick(item, index)" :class="chekid === index ? 'tab_one on flex-1 flex justify-content-center flex-align-center' : 'tab_one flex-1 flex justify-content-center flex-align-center'">
            <img class="logoimg1" src="@/assets/image/cf/ruzhi.png" alt="" v-if="(index === 0) & (chekid !== index)" />
            <img class="logoimg2" src="@/assets/image/cf/img18.png" alt="" v-if="(index === 1) & (chekid !== index)" />
            <img class="logoimg3" src="@/assets/image/cf/lizhi-3.png" alt="" v-if="(index === 2) & (chekid !== index)" />
            <img class="logoimg1" src="@/assets/image/cf/ruzhi-2.png" alt="" v-if="(index === 0) & (chekid === index)" />
            <img class="logoimg2" src="@/assets/image/cf/img18_1.png" alt="" v-if="(index === 1) & (chekid === index)" />
            <img class="logoimg3" src="@/assets/image/cf/lizhi-2.png" alt="" v-if="(index === 2) & (chekid === index)" />
             {{ item.title }}
          </div>
          </div>

          <div :class="chekid === 1?'right_qu on':'right_qu'" >
            <!-- .toString() -->
            <el-tabs v-model="activeName" >
              <el-tab-pane v-for="tab in listtabs" :key="tab.title" :label="tab.title" :name="tab.title">
                <div class="flex tabqu">
                  <div :class="checkdiv === citem.id ? 'tab_kuai on' : 'tab_kuai'" @click="tabClick(citem)" v-for="(citem, index) in tab.children" :key="citem.id">
                    {{ citem.title }}
                  </div>
                  
                </div>
              </el-tab-pane>
            </el-tabs>
            <!-- 
          <div class="tabkuai flex mt20">

            <div v-for="(tab,index) in listtabs" :key="tab" :class="index==0?'tab_check on':'tab_check'"  @click="tabkuanclick(tab)">
              {{ tab.title }}
            </div>

          </div>

          <div class="flex box-row mt20">

            <div :class="index==0?'threekuai on':'threekuai'"  v-for="(citem, index) in tabchildren" :key="citem.id">
                {{ citem.title }}
            </div> 
          </div> -->
          </div>
        </div>
      </div>

      <div class="header_right flex-1">
        <div class="zi1 flex">
          员工管理
          <!-- <el-icon color="#01509f" class="no-inherit ml10" style="margin-top: 1px">
            <QuestionFilled />
          </el-icon> -->
        </div>
        <div class="mt10 font30">{{ userinfo.total }}/200</div>
        <div class="flex justify-content-center box-align-center">
          <div ref="chartRef" style="width: 150px; height: 150px"></div>
          <div class="flex flex-1 flex-wrap" style="margin-left: 48px">
            <div class="flex box-row-column num_kuai y1">
              <div class="zi3">正式员工</div>
              <div class="zi_num">{{ userinfo.zs }}</div>
            </div>
            <div class="flex box-row-column num_kuai y2">
              <div class="zi3">风险员工</div>
              <div class="zi_num">{{ userinfo.fx }}</div>
            </div>
            <div class="flex box-row-column num_kuai y3">
              <div class="zi3">试用员工</div>
              <div class="zi_num">{{ userinfo.sy }}</div>
            </div>

            <div class="flex box-row-column num_kuai y4">
              <div class="zi3">待离职员工</div>
              <div class="zi_num">{{ userinfo.dlz }}</div>
            </div>
            <div class="flex box-row-column num_kuai y5">
              <div class="zi3">离职员工</div>
              <div class="zi_num">{{ userinfo.lz }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex mt20 table_qu box-row-column flex-1">
      <div class="flex width100 borderbottomea paddingbottom20 box-align-center">
        <div class="zi1 flex-1">员工管理</div>
        <div class="flex">
          <!-- <div :class="istaban === 6 ? 'table_anniu on' : 'table_anniu'" @click="checkrisk()">检测合规风险</div> -->
          <div :class="istaban === 1 ? 'table_anniu on' : 'table_anniu'" @click="goInvite(1)">部门管理</div>
          <div :class="istaban === 2 ? 'table_anniu on' : 'table_anniu'" @click="importvisible = true">员工导入</div>
          <div :class="istaban === 3 ? 'table_anniu on' : 'table_anniu'" @click="goInvite(3)">手动新增</div>
          <div :class="istaban === 4 ? 'table_anniu on' : 'table_anniu'" @click="goInvite(4)">邀请员工</div>
          <div :class="istaban === 5 ? 'table_anniu on' : 'table_anniu'" @click="Delperson()">删除员工</div>
        </div>
      </div>

      <el-form ref="queryForm" :inline="true" class="mt20" :model="queryParams">
        <el-form-item label="关键词:">
          <el-input v-model="queryParams.keywords" placeholder="员工姓名/手机号" clearable style="width: 200px" />
        </el-form-item>

        <el-form-item label="员工状态:">
          <el-select v-model="queryParams.job_status" placeholder="员工状态" style="width: 200px">
            <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门:">
          <el-cascader style="width: 200px" :options="deptoptions" :props="props1" clearable v-model="queryParams.dept_id" @change="handleChange" ref="selectedArrRef" />
        </el-form-item>
        <el-form-item label="实名状态:">
          <el-select v-model="queryParams.is_real" placeholder="实名状态" style="width: 200px">
            <el-option v-for="item in realoptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>


          <el-button type="primary" @click="handleQuery" style="width: 72px;height: 35px;font-size: 16px;" size="mini">搜索</el-button>
          <el-button @click="reset" style="width: 72px;height: 36px;font-size: 16px;">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="list"
        border
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        element-loading-text="加载中..."
        header-row-class-name="table-header"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="80" align="center">
          <template #default="{ $index }">
            {{ $index + (pageInfo.page - 1) * pageInfo.limit + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="员工名称" align="center" key="name" prop="name" />
        <el-table-column label="合规情况" align="center">
          <template #default="scope">
            <div @click="openfx(scope.row)" class="cursor">
              <el-progress :percentage="scope.row.risk_score" :color="customColor" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center" key="mobile" prop="mobile" />
        <el-table-column label="职位" align="center" key="position" prop="position" />

        <el-table-column label="实名状态" align="center" key="is_real" prop="is_real">
          <template #default="scope">
            <span>{{ scope.row.is_real === 0 ? "未实名" : "实名" }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="员工状态" align="center" key="job_status" prop="job_status" />  -->

        <el-table-column label="员工状态" align="center" key="job_status" prop="job_status">
          <template #default="scope">
            <span v-if="scope.row.job_status === 1">试用</span>
            <span v-if="scope.row.job_status === 2">正式</span>
            <span v-if="scope.row.job_status === 3">待离职</span>
            <span v-if="scope.row.job_status === 4">离职</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" align="center" key="dept_name" prop="dept_name" />

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button class="selfColor" text icon="Folder" @click="godangan(scope.row)">档案</el-button>
            <el-button class="selfColor"text icon="Edit" @click="goedit(scope.row)">编辑</el-button>
            <el-button class="selfColor" text icon="Files" @click="gowanshan(scope.row.id)" v-if="scope.row.job_status < 3">邀请完善信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" />
    </div>

    <AddInvite v-model:visible="Invitevisible" @chananniu="chananniu"></AddInvite>
    <Selectperson v-model:visible="personvisible" @chananniu="chananniu"></Selectperson>
    <Addperson v-model:visible="addpersonvisible" @chananniu="chananniu" @success="getuser_list" :isedit="isedit" :infoid="infoid"></Addperson>
    <Departmentlist v-model:visible="departmentvisible" @chananniu="chananniu"></Departmentlist>
    <infoDialog v-model:visible="infovisible" :dialoginfo="dialoginfo" :title="checktitle" @success="resetinfo"></infoDialog>
    <importDialog v-model:visible="importvisible" @success="reset"></importDialog>
    <fengxianDialog v-model:visible="fxvisible" :fxinfo="fxinfo"></fengxianDialog>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onBeforeUnmount, reactive, nextTick } from "@/TUIKit/adapter-vue";
  import AddInvite from "./components/AddInvite.vue";
  import Selectperson from "./components/Selectperson.vue";
  import uploadcard from "./components/uploadcard.vue";
  import Addperson from "./components/Addperson.vue";
  import infoDialog from "./components/infoDialog.vue";
  import importDialog from "./components/importDialog.vue";
  import fengxianDialog from "./components/fengxianDialog.vue";

  import * as echarts from "echarts";
  import Departmentlist from "./components/Departmentlist.vue";
  import { useRouter } from "vue-router";
  import { user_list, getDepartmentlist, user_delete, cate_list, gethtlist, statistics, check_risk ,invite_sms} from "@/api/cf";
  import Pagination from "@/components/Pagination.vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  const activeName = ref(null);
  const queryParams = ref({ keywords: "", dept_id: "", job_status: "", is_real: "" });
  const pageInfo = ref({ page: 1, limit: 10 });
  const Invitevisible = ref(false);
  const personvisible = ref(false);
  const addpersonvisible = ref(false);
  const departmentvisible = ref(false);
  const infovisible = ref(false);
  const importvisible = ref(false);
  const fxvisible = ref(false);
  const router = useRouter();
  const istaban = ref(null);
  const customColor = ref([{ color: "#01509f", percentage: 20 }]);
  const list = ref([]);
  const realoptions = ref([
    { name: "未实名", value: 0 },
    { name: "实名", value: 1 },
  ]);
  const cateoptions = ref([]);
  const chekid = ref(0);
  const listtabs = ref([]);
  const dialoginfo = ref([]);
  const checkdiv = ref(null);
  const checktitle = ref("");
  const fxinfo = ref(null);
  const tabchildren = ref(null);
  const jobstatusoptions = ref([
    { name: "试用", value: 1 },
    { name: "正式", value: 2 },
    { name: "待离职", value: 3 },
    { name: "离职", value: 4 },
  ]);

  // 获取 DOM 元素的引用（用于初始化图表）
  const chartRef = ref(null);
  // 存储 ECharts 实例
  let chartInstance = null;
  const isedit = ref(false);
  const deptoptions = ref([]);

  function chananniu() {
    istaban.value = null;

  }
  const total = ref(100);

  const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    list.value = [];
    getuser_list();
  };

  const selectedArrRef = ref(null);
  const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: false,
    value: "id",
    label: "name",
    children: "children",
  });

  const userinfo = ref({
    total: 0,
    zs: 0,
    fx: 0,
    sy: 0,
    dlz: 0,
    lz: 0,
  });

  function checkrisk() {
    const loading = ElLoading.service({
      lock: true,
      text: "合规检测中,请稍后……",
      background: "rgba(0, 0, 0, 0.3)",
    });

    check_risk()
      .then(res => {
        loading.close();
        if (res.code == 1) {
          reset();

          ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
          });
        }
      })
      .catch(err => {
        loading.close();
      });
  }

  function getclass(index) {
    if (chekid.value === index) {
      if (index == 0) {
        return "tab_one1 on flex box-align-center ";
      } else if (index == 1) {
        return "tab_one2 on flex box-align-center ";
      } else {
        return "tab_one3 on flex box-align-center ";
      }
    } else {
      if (index == 0) {
        return "tab_one1 flex box-align-center ";
      } else if (index == 1) {
        return "tab_one2 flex box-align-center ";
      } else {
        return "tab_one3 flex box-align-center ";
      }
    }

    //   chekid === index ? "tab_one on flex box-align-center " : "tab_one flex box-align-center ";
  }
  function openfx(row) {
    fxinfo.value = row;
    fxvisible.value = true;
  }

  function resetinfo() {
    checkdiv.value = null;
  }

  function divClick(item, index) {
    listtabs.value = [];

    if (item.children.length > 0) {
      activeName.value = item.children[0].title;
      listtabs.value = item.children;

      tabchildren.value = item.children[0].children;
    }

    chekid.value = index;
  }

  function tabkuanclick(item) {
    tabchildren.value = item.children;
  }
  function tabClick(item) {
    checkdiv.value = item.id;
    checktitle.value = item.title;
    gethtlist(item.id).then(res => {
      dialoginfo.value = res.data;

      infovisible.value = true;
    });
  }
  //部门选择
  function handleChange(value) {
    selectedArrRef.value.togglePopperVisible();
    // console.log(value); // 输出当前选择的值，可以是任意一级的ID数组
  }
  // 邀请
  function goInvite(a) {
    isedit.value = false;
    infoid.value = null;
    // console.log(isedit.value, "godangan");
    istaban.value = a;
    if (a === 4) {
      Invitevisible.value = true;
    } else if (a === 2) {
      personvisible.value = true;
    } else if (a === 3) {
      addpersonvisible.value = true;
    } else if (a === 1) {
      departmentvisible.value = true;
    }
  }

  const chartsdata = ref([
    { value: 0, name: "正式员工" },
    { value: 0, name: "风险员工" },
    { value: 0, name: "试用员工" },
    { value: 0, name: "待离职员工" },
    { value: 0, name: "离职员工" },
  ]);
  const infoid = ref(null);
  // 编辑
  function goedit(row) {
    addpersonvisible.value = true;
    isedit.value = true;
    infoid.value = row.id;
  }

  // 档案
  function godangan(row) {
    router.push({ name: "employeeInfo", params: { id: row.id, name: "one", status: 0 } });
   // router.push({ name: "qianshu", params: { id: 1, name: "one",  status: 0 } });
  }

  // 完善信息
  function gowanshan(id:any) {
    ElMessageBox.confirm("提交后，系统将会发送完善信息短信链接给对应员工?", "邀请完善信息", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
      if (action === "confirm") {

      invite_sms(id).then(res => {
          if (res.code == 1) {
            ElMessage({
              message: res.msg,
              grouping: true,
              type: "success",
            });
          }
        });
      }
    });
  }



  // 初始化图表的方法
  const initChart = () => {
    if (chartRef.value) {
      // 初始化 echarts 实例
      chartInstance = echarts.init(chartRef.value, null, {
        width: 150, // 设置宽度
        height: 150, // 设置高度
      });

      // 配置项
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          position: "right",
        },
        series: [
          {
            name: "员工管理",
            type: "pie", // 设置图表类型为饼图（环形图）
            radius: ["50%", "70%"], // 设置外半径和内半径，实现环形图效果
            avoidLabelOverlap: false, // 避免标签重叠
            label: {
              show: false, // 是否显示标签（如果要显示百分比，可以设置为true并在formatter中格式化）
              position: "center", // 标签的位置，默认为'top'，此处设置为'center'便于显示百分比标签
            },
            emphasis: {
              // 高亮的样式设置
              label: {
                show: true, // 高亮时显示标签
                fontSize: "12", // 字体大小调整，便于显示百分比数值等详细信息
                fontWeight: "bold", // 字体加粗显示高亮部分信息
              },
            },
            labelLine: {
              // 标签的视觉引导线样式设置，默认为直线，此处不设置即为直线效果，可根据需要调整样式如颜色等。
              show: false, // 是否显示引导线（在某些情况下可能需要隐藏引导线）
            },
            color: ["#1763f0", "#fe5c54", "#2ad4ad", "#fe7b42", "#9188e4"],
            data: chartsdata.value,
          },
        ],
      };

      // 使用配置项渲染图表
      chartInstance.setOption(option);
    }
  };

  const checklist = ref([]);

  function handleSelectionChange(val) {
    checklist.value = val;
  }
  // 窗口大小变化时调整图表尺寸
  const resizeChart = () => {
    chartInstance?.resize();
  };

  // 组件挂载后执行初始化
  onMounted(() => {
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener("resize", resizeChart);

    getDepartmentlist().then(res => {
      deptoptions.value = res.data;
    });
    getuser_list();
    getcate_list();
    getstatistics();
  });

  function reset() {
    queryParams.value.keywords = "";
    queryParams.value.dept_id = "";
    queryParams.value.job_status = "";
    queryParams.value.is_real = "";
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getuser_list();
  }

  function handleQuery() {
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getuser_list();
  }

  // 组件卸载前清理资源，防止内存泄漏
  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeChart);
    chartInstance?.dispose(); // 销毁 echarts 实例
  });

  function getuser_list() {
    user_list({ page: pageInfo.value.page, limit: pageInfo.value.limit, ...queryParams.value }).then(res => {
      list.value = res.data;
      total.value = res.count;
    });
  }
  function getstatistics() {
    statistics().then(res => {
      userinfo.value = res.data;
      const data = [
        { value: res.data.zs, name: "正式员工" },
        { value: res.data.fx, name: "风险员工" },
        { value: res.data.sy, name: "试用员工" },
        { value: res.data.dlz, name: "待离职员工" },
        { value: res.data.lz, name: "离职员工" },
      ];

      chartsdata.value = data;
      nextTick(() => {
        initChart();
      });
    });
  }
  function getcate_list() {
    cate_list().then(res => {
      cateoptions.value = res.data;
      listtabs.value = res.data[0].children;
      activeName.value = res.data[0].children[0].title;
      tabchildren.value = res.data[0].children[0].children;
    });
  }

  function Delperson() {
    if (checklist.value.length === 0) {
      ElMessage({
        message: "请选择要删除的员工",
        grouping: true,
        type: "error",
      });
      return;
    }
    ElMessageBox.confirm("是否确定删除?", "操作提示", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
      if (action === "confirm") {
        const data = checklist.value.map(item => item.id);

        user_delete(data).then(res => {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
          });
          getuser_list();
          // emit("update:visible", false);
          // emit("success", "");
        });
      }
    });
  }
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下划线颜色 */
// ::v-deep .el-tabs__active-bar {
//   background-color: #01509f;
// }

::v-deep .el-tabs__item {
  font-size: 17px;
  color: #666;
}

::v-deep .el-tabs__item.is-active {
  color: #01509f;
}

::v-deep .el-form-item__label {
  font-size: 16px !important;
}

::v-deep .el-cascader-node__label {
  font-size: 16px !important;
}

::v-deep .el-tabs__active-bar {

  background-color: transparent !important;
  background-image: linear-gradient(90deg, transparent 0, transparent 10%, #01509f 0, #01509f 85%, transparent 0, transparent);
}

.tabqu {
  flex-wrap: wrap;

  // &::-webkit-scrollbar {
  //   display: none;
  // }
}

.tabkuai {
  padding: 6px 0px;
  background-color: #f7f7f7;
  border-radius: 6px;
  color: #666;
}

.tab_check {
  font-size: 15px;
  line-height: 32px;
  padding: 0px 10px;

  margin: 0px 10px;
  border-radius: 6px;
}

.tab_check.on {
  background-color: #e6f5fd;
  color: #01509f;
}

.threekuai {
  margin: 0px 20px;
  font-size: 14px;
  padding-bottom: 8px;
  color: #666;
}

.threekuai.on {
  color: #01509f;
  border-bottom: solid 2px #01509f;
}

.jiantouimg {
  width: 15px;
  height: 6px;
  background: url(../../assets/image/cf/img12.png) no-repeat center center;
  background-size: 100% 100%;
  margin: 0px auto;
}

.logoimg1 {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 6px;
}

.logoimg2 {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  margin-right: 6px;
}

.logoimg3 {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: 6px;
}

.selfColor {
  color: #01509f !important;
  padding: 5px 0px;
  font-size: 15px
}

.list {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
}

.header_left {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.header_right {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-left: 10px;
}

.zi1 {
  font-size: 20px;
  color: #333;
  // font-family: 黑体;
  font-weight: bold
}

.zi3 {
  font-size: 16px;
}

.custom-tabs {
  width: 100%;
  /* 或者具体的宽度值 */
  overflow-x: auto;
  white-space: nowrap;
  /* 防止标签内容换行 */
}

.right_qu {
  background-color: #f3f8fb;
  padding: 0px 10px;
  // border-radius: 6px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  width: 80%;
  height: 100%;
  overflow-y: scroll;

}

.right_qu.on {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.tab_one {

  width: 100%;
  text-align: center;


  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;


  display: flex;

  // margin: 0 10px;
  cursor: pointer;
  font-size: 17px;
}

.tab_one.on {
  background-color: #f3f8fb;
  color: #01509f;
}

.tab_one1 {
  height: 50px;
  background-color: #e6e2ff;
  // background: linear-gradient(to right, #8985ff 100%, #c3c0ff 20%);
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #726cfc;
}

.tab_one1.on {
  border: solid 1px #b1a9ff;
  line-height: 48px;
  height: 48px;
}

.tab_one2.on {
  line-height: 48px;
  height: 48px;
  border: solid 1px #79d1ff;
}

.tab_one3.on {
  line-height: 48px;
  height: 48px;
  border: solid 1px #ffb1a2;
}

.tab_one2 {
  height: 50px;
  background-color: #d4eeff;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #009ffa;
}

.tab_one3 {
  height: 50px;
  background-color: #ffeae3;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  line-height: 50px;
  margin: 0 15px;
  cursor: pointer;
  font-size: 16px;
  color: #f9856f;
}

.tab_kuai {
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 16px;
  margin-right: 20px;
  cursor: pointer;

  border: solid 1px #0052a3;
  border-radius: 5px;
  color: #0052a3;
}

// #f3f8fb;
.tab_kuai.on {
  background-color: #01509f;
  color: #fff;
  border-radius: 4px;
}

.zi_num {
  font-size: 28px;
  font-weight: bold;
  margin-top: 5px;
}

.y1::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #1763f0;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y2::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #fe5c54;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y3::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #2ad4ad;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y4::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #fe7b42;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.y5::before {
  content: "";
  /* 使用空内容 */
  display: inline-block;
  /* 使元素为内联块元素 */
  width: 8px;
  /* 圆点宽度 */
  height: 8px;
  /* 圆点高度 */
  border-radius: 50%;
  /* 创建圆形 */
  background-color: #9188e4;
  /* 圆点颜色 */
  margin-right: 5px;
  /* 圆点和文本之间的间距 */
  /* 圆点和文本之间的间距 */
  position: absolute;
  top: 8px;
  left: -14px;
}

.num_kuai {
  width: 30%;
  margin-top: 10px;
  // margin-right: 10px;
  text-align: left;
  position: relative;
}

.table_qu {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.table_anniu {
  height: 34px;
  border: solid 1px #e2e2e2;
  border-radius: 6px;

  font-size: 16px;
  line-height: 34px;
  text-align: center;
  padding: 0 12px;
  cursor: pointer;
  margin: 0 10px;
}

.table_anniu:hover {
  border-color: rgb(198, 226, 255);
  background-color: rgb(236, 245, 255);
  color: #409eff
}

.table_anniu.on {
  border-color: #01509f;
  background-color: #01509f;
  color: #fff;
}

.rounded-table {
  border-radius: 10px;
  /* 调整这个值来改变圆角的大小 */
  overflow: hidden;
  /* 确保圆角不会被溢出的内容破坏 */
}

.el-table th .el-table__cell {
  background-color: #69c0f3 !important;
  /* 自定义颜色 */
  color: #333;
  /* 自定义文字颜色 */
}

:deep(.el-table__header) {
  .table-header {
    th {
      font-size: 16px;
      background: #f3f8fb;
      height: 53px;
      color: #6f7070;
      font-weight: normal;
    }
  }
}
</style>
